Gradient overlay

#code/css

https://codepen.io/makzan/pen/rNNBKMr

<div class="image-filter">
  <img src="https://placekitten.com/400/400?image=10" alt="Placeholder">  
</div>

.image-filter {
  position: relative;
  width: 400px;
  height: 400px;  
}
.image-filter img {
  filter: hue-rotate(-30deg) saturate(0.3) grayscale(0.5);
  transition: 0.3s;
}
.image-filter:after{
  position: absolute;
  content: '';
  top: 0; 
  left: 0; 
  height: 100%; 
  width: 100%;
  background: linear-gradient(to top right,rgba(0,0,0,.5), rgba(0, 255, 200, 0.8) );
  mix-blend-mode: multiply;
  opacity: 1;
  transition: 0.3s;
}
.image-filter:hover:after {
  opacity: 0;
}
.image-filter:hover img {
  filter: hue-rotate(0deg) saturate(1.0) grayscale(0.5);
}

Alternatively,

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-filter {
  position: relative;
  width: 400px;
  height: 400px;  
}
.image-filter img {
  filter: saturate(0.1) grayscale(0.2);
  transition: 0.3s;
}
.image-filter:after{
  position: absolute;
  content: '';
  top: 0; 
  left: 0; 
  height: 100%; 
  width: 100%;
  background: linear-gradient(to top right, rgba(79, 7, 161, 1), rgba(209, 255, 0, 1) 74.37%, rgba(210, 255, 1, 1));
  mix-blend-mode: multiply;
  opacity: 1;
  transition: 0.3s;
}
.image-filter:hover:after {
  opacity: 0;
}
.image-filter:hover img {
  filter: hue-rotate(0deg) saturate(1.0) grayscale(0.5);
}

body {
  padding: 2em;
}